<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
    	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	

	
</head>
<body>
	<div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">
        	   <a href="#" id="ChangeTypeBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">切换分类</a>
				<a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加分类</a>
				<!-- <a href="#" id="editBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">修改分类</a> -->
        		<a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除分类</a>
				<!-- 搜索 -->
				<!-- <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:30%;height:auto"> -->

        </div>
        <div data-options="region:'center',split:true" title="分类" id="catetree" >
        	
				<ul id="tt"></ul>
        	
		</div>
		<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
		        <form id="ff" method="post">
		            <div style="margin-bottom:20px">
							<input class="easyui-textbox" name="parentId" style="width:100%" data-options="label:'parentID:'">

		                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'标题:',required:true">
		            </div>
		            <!-- <div style="margin-bottom:20px">
		                <input class="easyui-textbox" name="" style="width:100%;height:60px" data-options="label:'内容:',multiline:true">
		            </div> -->
				</form>
				<!-- 添加按钮添加 -->
		        <div style="text-align:center;padding:5px 0">
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
		        </div>
		    </div>
	</div>
	<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
	<script>
		//获取数据
		var cateId = null;
		var num = 1;
		//默认为1
		$('#tt').tree({
		    url: "http://localhost:3000/cate/list/" + num,
		    method:'get',
		    onClick: function(node){
				cateId = node._id;
				$('#dg').datagrid({
					queryParams:{
						cateId:node._id
					}
				}).datagrid('reload')
			}
		});

		//切换分类
		$("#ChangeTypeBtn").click(function(){
			num++;
			if(num > 2){
				num=1;
			}
			$('#tt').tree({
				url: "http://localhost:3000/cate/list/" + num,
				method:'get',
				onClick: function(node){
					cateId = node._id;
					$('#dg').datagrid({
						queryParams:{
							cateId:node._id
						}
					}).datagrid('reload')
				}
			});
    	});

		//添加按钮
		$("#addBtn").click(function(){
			$('#ff').form('clear');
			if(cateId === null){
				$.messager.show({
				title:'信息提示',
				msg:'请选择分类，否则无法添加分类',
				timeout:3000,
				showType:'show'
			});
			}else{
				$('#dlg').dialog('open');
			}
		});
    	//添加数据submit
    	function submitForm(){		
			var postData = $("#ff").serializeJSON();
			postData.parentId = cateId;
			postData.type = num;
			console.log(postData);	
			// add
			$.ajax({
				type:"post",
				url:"http://localhost:3000/cate/data",
				data: postData,
				async:true
			}).done(function(res){
				console.log(res);
				// 这里要做一件事
				$.messager.show({
					title:'信息提示',
					msg:'数据添加成功',
					timeout:3000,
					showType:'show'
				});
				$('#dlg').dialog('close');
				$('#tt').tree('reload');
			})			
        }
        function clearForm(){
            $('#ff').form('clear');
		}
		
    	// 更新
		
		// $("#editBtn").click(function(){
		// 	console.log(cateId);
		// 	console.log(num);
		// 	if(cateId === null){
		// 		$.messager.show({
		// 		title:'信息提示',
		// 		msg:'请选择分类，否则无法修改分类',
		// 		timeout:3000,
		// 		showType:'show'
		// 	});
		// 	}else{
		// 		$('#dlg').dialog('open');
		// 	}
		// });
		// function editData(id){
		// 	$.ajax({
		// 		type:"put",
		// 		url:"http://localhost:3000/cate/data/" +id,
		// 		async:true
		// 	}).done(function(res){
		// 		$('#ff').form('load', res);
		// 		$('#dlg').dialog('open');
		// 	})
		// }
		
		//删除多个按钮
		$("#removesBtn").click(function(){
			// console.log(cateId);
			if(cateId === null){
				$.messager.show({
				title:'信息提示',
				msg:'请选择分类，否则无法删除分类',
				timeout:3000,
				showType:'show'
			});
			}else{
				$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
					if (r){
						$.ajax({
							type:"delete",
							url:"http://localhost:3000/cate/data/" + cateId,
							async:true
						}).done(function(res){
							$("#tt").tree('reload');
						})
					}
				});
			}
			
		})
		
		

    </script>
</body>
</html>